<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"> 

<h:head>
	<style>
		.cal{
			font-size: 0.7em;
			margin:0px;
			padding:0px;
			border:1px solid #FFFFFF;
		}
		.agendado{
			width:100%;
			height:20px;
			padding:0px;
			margin:0px;
			background:none;
			border:none;
			background-color: #0000FF;
			
		}
		.livre{
			width:100%;
			height:20px;
			padding:0px;
			margin:0px;
			background:none;
			border:none;
			background-color: #FFFFFF;
		}
		.indisponivel{
			width:100%;
			height:20px;
			padding:0px;
			margin:0px;
			background:none;
			border:none;
			background-color: #aaa;
		}
	</style>
</h:head> 
<h:body>
<h:form id="form1" prependId="false">
	<h:panelGrid columns="2">
		<h:panelGrid columns="3">
			Dentista:
			<p:autoComplete size="50" value="#{agendamentoControl.dentista}" id="acDentista" completeMethod="#{agendamentoControl.listarDentistasPorNome}"  
		                        var="d" itemLabel="#{d.nome}" itemValue="#{d}" converter="agendamentoDentistaConverter" forceSelection="true">
		    </p:autoComplete>
		    <p:commandButton id="atuage" widgetVar="atuage" value="Carregar agenda"  actionListener="#{agendamentoControl.carregarAgenda}" update="agenda painel"/>
		    <h:outputText value="Cliente:" />                     
		   	<p:autoComplete size="50" value="#{agendamentoControl.cliente}" id="acCliente" completeMethod="#{agendamentoControl.listarClientesPorNome}"  
		                        var="p" itemLabel="#{p.nome}" itemValue="#{p}" converter="agendamentoClienteConverter" forceSelection="true"/>
		    <p:commandButton id="mostracli" type="button" widgetVar="mostracli" value="Novo Cliente" onclick="cadcli.show()" update="cadcli" />
    	</h:panelGrid>
    	<div style="margin:0;margin-left:20px;padding:10px 15px;border:1px solid #aaa;background:#eee;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;">
	   		<table>
	   			<tr style="padding:10px;">
	    			<td colspan="6">
	    				<b>Legenda</b>
	    			</td>
	    		</tr>
	    		<tr style="padding:10px;">
	    			<td style="border:1px solid #000;background:#fff;float:left;width:40px;height:20px;"></td>
	    			<td style="padding-right:10px;">Livre</td>
	    			<td style="border:1px solid #000;background:#0000FF;float:left;width:40px;height:20px;"></td>
	    			<td style="padding-right:10px;">Agendado</td>
	    			<td style="border:1px solid #000;background:#aaa;float:left;width:40px;height:20px;"></td>
	    			<td>Não disponível</td>
	    		</tr>
	    	</table>
    	</div>
   	</h:panelGrid>
   	<p:dataTable  id="agenda"  var="age" value="#{agendamentoControl.agenda}" styleClass="cal">
		<p:column style="width:80px;padding:1px;background-color:#CCCCCC;font-size:1em;">
			<f:facet name="header">
				<h:outputText value="Data" />
			</f:facet>
			<h:outputText value="#{age.data}" />
		</p:column>
		<p:column style="width:36px;padding:1px;">
			<f:facet name="header">
				<h:outputText value="07:00" />
			</f:facet>
			<h:commandButton value=" " type="button" styleClass="#{(age.a0700!=null)?'agendado':(agendamentoControl.validarHorario(age.data,'0700')?'livre':'indisponivel')}" >
				<p:ajax process="@all" update=":form1:painel :form1:growl" listener="#{agendamentoControl.agendar(age.data,'0700')}" oncomplete="$('#atuage').click()" />
			</h:commandButton>
		</p:column>
		<p:column style="width:36px;padding:1px;">
			<f:facet name="header">
				<h:outputText value="07:30" />
			</f:facet>
			<h:commandButton value=" " type="button" styleClass="#{(age.a0730!=null)?'agendado':(agendamentoControl.validarHorario(age.data,'0730')?'livre':'indisponivel')}" >
				<p:ajax process="@all" update=":form1:painel :form1:growl"  listener="#{agendamentoControl.agendar(age.data,'0730')}" oncomplete="$('#atuage').click()"/>
			</h:commandButton>		</p:column>
		<p:column style="width:36px;padding:1px;">
			<f:facet name="header">
				<h:outputText value="08:00" />
			</f:facet>
			<h:commandButton value=" " type="button" styleClass="#{(age.a0800!=null)?'agendado':(agendamentoControl.validarHorario(age.data,'0800')?'livre':'indisponivel')}" >
				<p:ajax process="@all" update=":form1:painel :form1:growl"  listener="#{agendamentoControl.agendar(age.data,'0800')}" oncomplete="$('#atuage').click()" />
			</h:commandButton>		</p:column>
		<p:column style="width:36px;padding:1px;">
			<f:facet name="header">
				<h:outputText value="08:30" />
			</f:facet>
			<h:commandButton value=" " type="button" styleClass="#{(age.a0830!=null)?'agendado':(agendamentoControl.validarHorario(age.data,'0830')?'livre':'indisponivel')}" >
				<p:ajax process="@all" update=":form1:painel :form1:growl"  listener="#{agendamentoControl.agendar(age.data,'0830')}" oncomplete="$('#atuage').click()" />
			</h:commandButton></p:column>
		<p:column style="width:36px;padding:1px;">
			<f:facet name="header">
				<h:outputText value="09:00" />
			</f:facet>
			<h:commandButton value=" " type="button"  styleClass="#{(age.a0900!=null)?'agendado':(agendamentoControl.validarHorario(age.data,'0900')?'livre':'indisponivel')}" >
				<p:ajax process="@all" update=":form1:painel :form1:growl"  listener="#{agendamentoControl.agendar(age.data,'0900')}" oncomplete="$('#atuage').click()" />
			</h:commandButton>
		</p:column>
		<p:column style="width:36px;padding:1px;">
			<f:facet name="header">
				<h:outputText value="09:30" />
			</f:facet>
			<h:commandButton value=" " type="button"  styleClass="#{(age.a0930!=null)?'agendado':(agendamentoControl.validarHorario(age.data,'0930')?'livre':'indisponivel')}" >
				<p:ajax process="@all" update=":form1:painel :form1:growl"  listener="#{agendamentoControl.agendar(age.data,'0930')}" oncomplete="$('#atuage').click()" />
			</h:commandButton>
		</p:column>
		<p:column style="width:36px;padding:1px;">
			<f:facet name="header">
				<h:outputText value="10:00" />
			</f:facet>
			<h:commandButton value=" " type="button" styleClass="#{(age.a1000!=null)?'agendado':(agendamentoControl.validarHorario(age.data,'1000')?'livre':'indisponivel')}" >
				<p:ajax process="@all" update=":form1:painel :form1:growl"  listener="#{agendamentoControl.agendar(age.data,'1000')}" oncomplete="$('#atuage').click()" />
			</h:commandButton>		
		</p:column>
		<p:column style="width:36px;padding:1px;">
			<f:facet name="header">
				<h:outputText value="10:30" />
			</f:facet>
			<h:commandButton value=" " type="button" styleClass="#{(age.a1030!=null)?'agendado':(agendamentoControl.validarHorario(age.data,'1030')?'livre':'indisponivel')}" >
				<p:ajax process="@all" update=":form1:painel :form1:growl"  listener="#{agendamentoControl.agendar(age.data,'1030')}" oncomplete="$('#atuage').click()" />
			</h:commandButton>		
		</p:column>
		<p:column style="width:36px;padding:1px;">
			<f:facet name="header">
				<h:outputText value="11:00" />
			</f:facet>
			<h:commandButton value=" " type="button" styleClass="#{(age.a1100!=null)?'agendado':(agendamentoControl.validarHorario(age.data,'1100')?'livre':'indisponivel')}" >
				<p:ajax process="@all" update=":form1:painel :form1:growl"  listener="#{agendamentoControl.agendar(age.data,'1100')}" oncomplete="$('#atuage').click()" />
			</h:commandButton>		
		</p:column>
		<p:column style="width:36px;padding:1px;">
			<f:facet name="header">
				<h:outputText value="11:30" />
			</f:facet>
			<h:commandButton value=" " type="button" styleClass="#{(age.a1130!=null)?'agendado':(agendamentoControl.validarHorario(age.data,'1130')?'livre':'indisponivel')}" >
				<p:ajax  update=":form1:painel :form1:growl"  listener="#{agendamentoControl.agendar(age.data,'1130')}" oncomplete="$('#atuage').click()" />
			</h:commandButton>		
		</p:column>
		<p:column style="width:36px;padding:1px;">
			<f:facet name="header">
				<h:outputText value="14:00" />
			</f:facet>
			<h:commandButton value=" " type="button" styleClass="#{(age.a1400!=null)?'agendado':(agendamentoControl.validarHorario(age.data,'1400')?'livre':'indisponivel')}" >
				<p:ajax process="@all" update=":form1:painel :form1:growl"  listener="#{agendamentoControl.agendar(age.data,'1400')}" oncomplete="$('#atuage').click()" />
			</h:commandButton>		
		</p:column>
		<p:column style="width:36px;padding:1px;">
			<f:facet name="header">
				<h:outputText value="14:30" />
			</f:facet>
			<h:commandButton value=" " type="button" styleClass="#{(age.a1430!=null)?'agendado':(agendamentoControl.validarHorario(age.data,'1430')?'livre':'indisponivel')}" >
				<p:ajax process="@all" update=":form1:painel :form1:growl"  listener="#{agendamentoControl.agendar(age.data,'1430')}" oncomplete="$('#atuage').click()" />
			</h:commandButton>		
		</p:column>
		<p:column style="width:36px;padding:1px;">
			<f:facet name="header">
				<h:outputText value="15:00" />
			</f:facet>
			<h:commandButton value=" " type="button" styleClass="#{(age.a1500!=null)?'agendado':(agendamentoControl.validarHorario(age.data,'1500')?'livre':'indisponivel')}" >
				<p:ajax process="@all" update=":form1:painel :form1:growl"  listener="#{agendamentoControl.agendar(age.data,'1500')}" oncomplete="$('#atuage').click()" />
			</h:commandButton>		
		</p:column>
		<p:column style="width:36px;padding:1px;">
			<f:facet name="header">
				<h:outputText value="15:30" />
			</f:facet>
			<h:commandButton value=" " type="button" styleClass="#{(age.a1530!=null)?'agendado':(agendamentoControl.validarHorario(age.data,'1530')?'livre':'indisponivel')}" >
				<p:ajax process="@all" update=":form1:painel :form1:growl"  listener="#{agendamentoControl.agendar(age.data,'1530')}" oncomplete="$('#atuage').click()" />
			</h:commandButton>		
		</p:column>
		<p:column style="width:36px;padding:1px;">
			<f:facet name="header">
				<h:outputText value="16:00" />
			</f:facet>
			<h:commandButton value=" " type="button" styleClass="#{(age.a1600!=null)?'agendado':(agendamentoControl.validarHorario(age.data,'1600')?'livre':'indisponivel')}" >
				<p:ajax process="@all" update=":form1:painel :form1:growl"  listener="#{agendamentoControl.agendar(age.data,'1600')}" oncomplete="$('#atuage').click()" />
			</h:commandButton>		
		</p:column>
		<p:column style="width:36px;padding:1px;">
			<f:facet name="header">
				<h:outputText value="16:30" />
			</f:facet>
			<h:commandButton value=" " type="button" styleClass="#{(age.a1630!=null)?'agendado':(agendamentoControl.validarHorario(age.data,'1630')?'livre':'indisponivel')}" >
				<p:ajax process="@all" update=":form1:painel :form1:growl"  listener="#{agendamentoControl.agendar(age.data,'1630')}" oncomplete="$('#atuage').click()" />
			</h:commandButton>		
		</p:column>
		<p:column style="width:36px;padding:1px;">
			<f:facet name="header">
				<h:outputText value="17:00" />
			</f:facet>
			<h:commandButton value=" " type="button" styleClass="#{(age.a1700!=null)?'agendado':(agendamentoControl.validarHorario(age.data,'1700')?'livre':'indisponivel')}" >
				<p:ajax process="@all" update=":form1:painel :form1:growl"  listener="#{agendamentoControl.agendar(age.data,'1700')}" oncomplete="$('#atuage').click()" />
			</h:commandButton>		
		</p:column>
		<p:column style="width:36px;padding:1px;">
			<f:facet name="header">
				<h:outputText value="17:30" />
			</f:facet>
			<h:commandButton value=" " type="button" styleClass="#{(age.a1730!=null)?'agendado':(agendamentoControl.validarHorario(age.data,'1730')?'livre':'indisponivel')}" >
				<p:ajax process="@all" update=":form1:painel :form1:growl"  listener="#{agendamentoControl.agendar(age.data,'1730')}" oncomplete="$('#atuage').click()" />
			</h:commandButton>		
		</p:column>
	</p:dataTable>
	<p:growl id="growl" showDetail="true" sticky="true" />
	<p:panel header="Agendamento" id="painel" visible="#{((agendamentoControl.agendamento==null)?false:true)}">
		<h:panelGrid columns="2">
			Agendamento:
			<h:outputText id="inicio" value="#{agendamentoControl.horarioAgendado}">
				<f:convertDateTime pattern="dd/MM/yyyy HH:mm"/>
			</h:outputText>
			Cliente:
			<h:outputText id="clienteNome" value="#{agendamentoControl.agendamento.cliente.nome}  #{agendamentoControl.agendamento.cliente.telefone}" />
			<h:outputText value=" " />
			<p:commandButton value="Cancelar Agendamento" actionListener="#{agendamentoControl.cancelarAgendamento}" oncomplete="$('#atuage').click()"/>
		</h:panelGrid>
	</p:panel>
	<p:dialog header="Cadastro básico de cliente" id="cadcli" widgetVar="cadcli">
		<h:panelGrid columns="2">
			Nome:
			<p:inputText size="50" id="cliNome" value="#{agendamentoControl.novoCliente.nome}" />
			Telefone:
			<p:inputText size="20" id="cliTelefone" value="#{agendamentoControl.novoCliente.telefone}" />
			Convenio:
			<p:selectOneMenu id="cliConvenio" value="#{agendamentoControl.novoCliente.convenio}" var="p" converter="agendamentoConvenioConverter">
				<f:selectItem itemLabel="Selecione..." itemValue="" />
				<f:selectItems value="#{agendamentoControl.listaDeConvenios}" var="c" itemLabel="#{c.descricao}" itemValue="#{c}"/>
				<p:column>
					#{p.descricao}
				</p:column>
			</p:selectOneMenu>
			<f:facet name="footer">
				<p:commandButton value="Salvar" actionListener="#{agendamentoControl.criarNovoCliente}" oncomplete="$('#cadcli').hide()" update=":form1:growl"/>
				<p:commandButton value="Cancelar" type="button" onclick="#{p:widgetVar('cadcli')}.hide()"/>
			</f:facet>
		</h:panelGrid>
	</p:dialog>
</h:form>
</h:body> 
</html>
